<template>
	<view class="">
		<view class="boxs">
			<view class="flexCenter">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" fields="month" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
				<image src="../../../static/img/detailsMsg/icon_drop-down.png" mode="" class="selectIcon ml20"></image>
			</view>
			<view class="w100" v-if="dataList.length > 0">
				<view class="w100 flexenters p19 bor_bottom" v-for="(item,index) in dataList" :key="index">
					<view class="">
						<view class="co34363D">{{item.detailTitle}}</view>
						<view class="co989BA6">{{item.createTime}}</view>
					</view>
					<view class="co017EFE" v-if="item.scoreType == 0">{{item.changeScore}}</view>
					<view class="coFF5753" v-if="item.scoreType == 1">{{item.changeScore}}</view>
				</view>
			</view>
			<view v-else>
				<null-page></null-page>
			</view>
		</view>
	</view>
</template>

<script>
	import home from "@/serve/api/home.js"
	import nullPage from '@/common/null.vue'
	export default {
		components:{
			nullPage
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				pageNum:1,
				dataList:[],
			}
		},
		onLoad() {
			this.particulars()
		},
		onReachBottom: function() {
				this.particulars();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				return `${year}-${month}`;
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				this.pageNum = 1
				this.dataList = []
				this.particulars()
			},
			async particulars() {
				let parme = {
					pageNum: this.pageNum,
					pageSize: 10,
					yearMonth: this.date, 
				}
				const res = await home.selectIntegralDetailList(parme)
				this.pageNum += 1;
				this.dataList = this.dataList.concat(res.data.data)
				if (res.data.data.length < 10 && this.dataList.length > 0) {
					uni.showToast({
						icon: 'none',
						title: '已加载全部'
					})
				} else if (res.data.data.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '暂无数据'
					})
				}
			}
		}
	}
</script>

<style scoped>
	@import "../../../static/css/init.css";  
	page{
		background-color: #FFFFFF;
	}

	.selectIcon {
		width: 20rpx;
		height: 20rpx;
	}

	.boxs {
		padding: 20px;
		box-sizing: border-box;
	}

	.co34363D {
		color: #34363D;
		font-size: 16px;
	}

	.co989BA6 {
		color: #989BA6;
		font-size: 12px;
		margin-top: 5px;
	}

	.co017EFE {
		color: #017EFE;
		font-size: 18px;
	}

	.coFF5753 {
		color: #FF5753;
		font-size: 18px;
	}

	.p19 {
		padding: 19px 0;
	}

	.bor_bottom {
		border-bottom: 1px solid #F2F4F8;
	}
</style>
